<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横向广告无限滚动的效果</title>
</head>

<body>
    <style>
        .ad-container {
            width: 100%;
            height: 50px;
            overflow: hidden;
            position: relative;
        }

        .ad-item {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #f00;
            position: absolute;
            top: 0;
            left: 100%;
            transition: left 0.5s ease-out;
        }
    </style>
    <div class="ad-container">
        <div class="ad-item">广告 1</div>
        <div class="ad-item">广告 2</div>
        <div class="ad-item">广告 3</div>
    </div>

    <script>
        let currentIndex = 0;
        const adItems = document.querySelectorAll('.ad-item');
        const adContainer = document.querySelector('.ad-container');
        const adItemWidth = adItems[0].offsetWidth;
        const totalWidth = adItems.length * adItemWidth;
        const animationDuration = 20 * 1000; // 动画持续时间，单位为毫秒  
        const animationInterval = animationDuration / totalWidth; // 计算每个广告项的滚动时间间隔  
        const animationTimer = setInterval(() => {
            for (let i = 0; i < adItems.length; i++) {
                const currentAdItem = adItems[i];
                const currentLeft = currentAdItem.style.left || 0; // 获取当前广告项的 left 属性值  
                currentAdItem.style.left = `${parseInt(currentLeft) - adItemWidth}px`; // 向左移动一个广告项的宽度  
                if (parseInt(currentLeft) === -adItemWidth * (adItems.length - 1)) { // 如果当前广告项到达最左侧，则将其移动到最右侧，实现无限滚动效果  
                    currentAdItem.style.left = `${totalWidth}px`;
                }
            }
        }, animationInterval); // 设置定时器，每隔一段时间执行一次动画效果
    </script>
</body>

</html>